<script setup>
import { ref } from 'vue'
const visableDrawer = ref(false)
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import {
  AddUserService,
  EditUserService,
  GetUserDetailService
} from '@/api/user'
import {GetRoleService,GetRoleDetailService} from '@/api/role'
import { ElMessage } from 'element-plus'
// 默认数据
const defaultForm = {
  userName: '',
  id: '',
  password: '',
  email: '',
  phone: '',
  createTime:'',
  updateTime:'',
  roles:[]
}

const selectRoles = ref([])
const selectedIds = ref([])
const roles = ref([])

//表单校验规则
const rules = {
  userName: [
    { required: true, message: '请输入用户名称', trigger: 'blur' },
    {
      pattern: /^\S{1,10}$/,
      message: '用户名必须是1-10位的非空字符',
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{1,10}$/,
      message: '密码必须是1-10位的非空字符',
      trigger: 'blur'
    }
  ],
  email: [{ required: true, message: '请输入用户邮箱', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入用户电话', trigger: 'blur' }]
}

// 准备数据
const formModel = ref({ ...defaultForm })

const open = async (row) => {
  visableDrawer.value = true
  const res = await GetRoleService()
  roles.value = res.data.data
  console.log(res);
  console.log(roles.value);
  if (row.id) {
    //需要基于row.id发送请求，获取编辑对应的详情数据，进行回显
    const res = await GetUserDetailService(row.id)
    formModel.value = res.data.data
  } else {
    formModel.value = { ...defaultForm } //基于默认的数据，重置form数据
  }
  console.log(row)
}
const formRef = ref()

const onSubmit = async () => {
  await formRef.value.validate()
  const isEdit = formModel.value.id
  for (var i = 0; i < selectedIds.value.length; i++) {
    const ss = await GetRoleDetailService(selectedIds.value[i])
    selectRoles.value.push(ss.data.data)
  }
  formModel.value.roles = selectRoles.value
  if (isEdit) {
    await EditUserService(formModel.value)
    ElMessage.success('修改成功')
    visableDrawer.value = false
    emit('success', 'edit')
  } else {
    delete formModel.value.id
    await AddUserService(formModel.value)
	console.log(formModel.value);
    ElMessage.success('添加成功')
    visableDrawer.value = false
    //通知到父组件，添加成功了
    emit('success', 'add')
  }
}

const emit = defineEmits(['success'])

defineExpose({
  open
})
</script>

<template>
  <el-drawer v-model="visableDrawer" title="添加用户" size="40%">
    <el-form ref="formRef" :model="formModel" :rules="rules" abel-width="100px">
      <el-form-item label="用户名称">
        <el-input
          placeholder="请输入用户名称"
          v-model="formModel.userName"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input
          placeholder="请输入用户邮箱"
          v-model="formModel.email"
        ></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input
          placeholder="请输入用户电话"
          v-model="formModel.phone"
        ></el-input>
      </el-form-item>   
	  <el-form-item label="创建时间">
	    <el-date-picker
	      v-model="formModel.createTime"
	      type="date"
	      placeholder="请输入用户创建时间"
	      size="default"
	      value-format="YYYY-MM-DD HH:mm:ss"
	    />
	  </el-form-item>
	  <el-form-item>
	    <el-select
	      v-model="selectedIds"
	      placeholder="请选择用户角色"
	      multiple
	      style="width: 240px"
	    >
	      <el-option
	        v-for="item in roles"
	        :key="item.id"
	        :label="item.roleName"
	        :value="item.id"
	      />
	    </el-select>
	  </el-form-item>
      <el-form-item>
        <el-button @click="onSubmit()" type="primary">提交</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style lang="scss" scoped>
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: userer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}

.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
